<template>
	<div id="search">
		<p class="snav">
			<a class="selected" href="javascript:;">标的物类型</a>
			<a href="javascript:;">精选推荐</a>
			<a href="javascript:;">预售公告</a>
			<a href="javascript:;">收藏频率</a>
		</p>
		<div>
			<el-row class="elrow">
				<el-col :span="18">
					<input type="text" placeholder="请选择需要查询的内容"/>
				</el-col>
				<el-col :span="6">
					<button>立即搜索</button>
				</el-col>
			</el-row>
			<el-row class="elrows">
				<el-col :span="10">
					<h2>标的物类型</h2>
					<p>
						<a href="javascript:;" v-for="item in assetItems.list_types">
							{{ item.title }}
						</a>
					</p>
					<h2>价格</h2>
					<p>
						<a href="javascript:;" v-for="item in assetItems.money">
							{{ item.title }}
						</a>
					</p>
				</el-col>
				<el-col :span="14">
					<h2>地区选择</h2>
					<p>
						<a href="javascript:;" v-for="item in assetItems.list_citys">
							{{ item.title }}
						</a>
					</p>
					<h2>收藏频率</h2>
					<p>
						<a href="javascript:;">不限</a>
						<a href="javascript:;">收藏由高到低</a>
						<a href="javascript:;">收藏由低到高</a>
					</p>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	export default{
		name: "search",
		data(){
        	return {
                assetItems:[]
			}
        },
        mounted: function () {
			this.getList();
		},
        methods:{
            getList() {
            	const _this = this;
				this.axios.get(_this.$store.state.Check.url + '/get_list',{
					params: {
						slug : localStorage.slug
					}
				}).then(function(response){
					_this.assetItems = response.data;
					console.log(response.data);
				//	alert(response.data.list_types.length);
				}).catch(err => {
                    this.$notify({
                        title: '警告',
                        message: '网络出错了~再试试吧~',
                        type: 'warning'
                    });
                });
            }
		}
	}
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../public/css/variable.less';
	.snav{
		a{
			position: relative;
		    font-size: 16px;
		    color: #fff;
		    display: inline-block;
		    margin-right: 30px;
		    line-height: 50px;
		    &.selected,&:hover{
		    	color: #d8b26a;
		    	&:after{
			    	content: '';
			    	position: absolute;
	                .triangle(top,@w:10px,@c:#fff);
	                left: 50%;
	                bottom: -1px;
	                margin-left: -10px;
			    }
		    }
	    }
	}
	.elrow{
		.fonts(16px);
		background: @cw;
		input{
			width: 100%;
			padding: 15px 10px;
			box-sizing: border-box;
			border: 0;
			outline: 0;
		}
		button{
			width: 100%;
			height: 51px;
			border: 0;
			background: @cgolden;
			color: @cw;
			outline: 0;
		}
	}
	.elrows{
		padding: 30px 20px 20px;
	    box-sizing: border-box;
	    background: url(../../../public/images/o_gray.png) repeat repeat;
	    background-size: cover;
	    border: 1px solid @cw;
	    border-top: 0;
	    height: 304px;
	    color: @cw;
	    h2{
	    	.fonts(16px);
		    line-height: 16px;
		    padding-left: 8px;
		    margin-bottom: 15px;
		    border-left: 3px solid #d8b26a;
	    }
	    p{
	    	.fonts(14px);
	    	padding-bottom: 15px;
		    margin-bottom: 25px;
		    border-bottom: 1px dashed #7a8589;
		    &:last-child{
		    	border-bottom: 0;
		    }
	    }
	    a{ 
	    	display: inline-block;
	    	color: @cw; 
	    	padding: 5px 10px;
	    }
	    .el-col-10{
	    	padding-right: 20px;
	    }
	    .el-col-14{
	    	padding-left: 20px;
	    	border-left: 1px dashed #7a8589;
	    }
	}
</style>